<template>
  <div>
    <!-- pc端 -->
    <div v-if="!isPhone"
         class="advert-wrapper">
      <h3 class="advert-title">发布 OpenHarmony 商业发行版的厂商</h3>
      <div class="advert-list-box">
        <div class="advert-box"
             @mouseenter="enterAdvert"
             @mouseleave="leaveAdvert"
             ref="temp">
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '1'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '2'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '3'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '4'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '5'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '6'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '7'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
          <div class="advert-list"
               v-for="aItem in advertData"
               :key="aItem.id + '8'">
            <a :href="aItem.url"
               class="advert-item">
              <img :src="aItem.logoUrl"
                   alt="" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端 -->
    <div v-if="isPhone"
         class="advert-wrapper">
      <h3 class="advert-title">发布 OpenHarmony 商业发行版的厂商</h3>
      <ul class="advert-list">
        <li class="advert-item"
            v-for="aItem in advertData"
            :key="aItem.id + '1'">
          <a :href="aItem.url">
            <img :src="aItem.logoUrl"
                 alt="" />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
let x = 0;
import { queryVendor } from "@/api/index";
export default {
  data () {
    return {
      tempInterval: undefined,
      isPhone: false,
      screenWidth: document.body.clientWidth,
      advertData: [],
    };
  },
  created () {
    let phonewid = document.documentElement.clientWidth < 768;
    this.isPhone = phonewid;
    this.queryVendor();
  },
  mounted () {
    if (!this.isPhone) this.tempInterval = setInterval(this.rollTemp, 50);
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  },
  destroyed () {
    clearInterval(this.tempInterval);
  },
  methods: {
    rollTemp () {
      if (!this.isPhone) {
        let all = 0;
        let count = this.$refs.temp.childElementCount;
        for (let i = 0; i < count; i++) {
          all += this.$refs.temp.children[i].offsetWidth;
        }
        let half = all >> 1;
        if (x < 1 - half) {
          x = 0;
        }
        x -= 2;
        this.$refs.temp.style.transform = `translateX(${x}px)`;
      }
    },
    queryVendor () {
      queryVendor().then((res) => {
        this.advertData = res.data.data;
        console.log(res);
      });
    },
    enterAdvert () {
      clearInterval(this.tempInterval);
    },
    leaveAdvert () {
      if (!this.isPhone) this.tempInterval = setInterval(this.rollTemp, 50);
    },
  },
  watch: {
    screenWidth (newVal) {
      if (newVal < 768) this.isPhone = true;
      else this.isPhone = false;
    },
  },
};
</script>

<style scoped lang="less">
@media screen and (min-width: 1032px) {
  .base {
    width: 1032px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .advert-wrapper {
    padding: 104px 0 42px 0;
    .advert-title {
      .base;
      justify-content: flex-start;
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 56px;
      margin-bottom: 18px;
    }
    .advert-list-box {
      background: url("../../assets/images/advert-background.png") no-repeat
        100% 100%;
      overflow: hidden;
      .advert-box {
        height: 266px;
        display: flex;
        .advert-list {
          display: flex;
          align-items: center;
          // display: -ms-flexbox;
          .advert-item {
            display: block;
            max-width: 240px;
            min-width: 240px;
            height: 100px;
            margin-right: 24px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1032px) {
  .base {
    width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .advert-wrapper {
    padding: 48px 0 42px 0;
    .advert-title {
      .base;
      justify-content: flex-start;
      font-size: 32px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 45px;
      margin-bottom: 34px;
    }
    .advert-list-box {
      background: url("../../assets/images/advert-background.png") no-repeat
        100% 100%;
      overflow: hidden;
      .advert-box {
        height: 160px;
        display: flex;
        .advert-list {
          display: flex;
          align-items: center;
          .advert-item {
            display: block;
            min-width: 216px;
            max-width: 216px;
            height: 100px;
            margin-right: 24px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .base {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .advert-wrapper {
    padding: 32px 12px 24px;
    .advert-title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
      margin-bottom: 24px;
    }
    .advert-list {
      display: flex;
      flex-wrap: wrap;
      .advert-item {
        width: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
